<template>
	<div>
		<table>
			<thead>
				<tr>
					<td>文件名</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>deepin-desktop-community-20.9-amd64.iso</td>
					<td><a href="#" @click="onClickMeDownload('deepin-desktop-community-20.9-amd64.iso')">点击下载</a></td>
				</tr>
				<tr>
					<td>Git-2.40.0-64-bit.exe</td>
					<td><a href="#" @click="onClickMeDownload('Git-2.40.0-64-bit.exe')">点击下载</a></td>
				</tr>
				<tr>
					<td>VSCode-win32-x64-1.89.1.zip</td>
					<td><a href="#" @click="onClickMeDownload('VSCode-win32-x64-1.89.1.zip')">点击下载</a></td>
				</tr>
			</tbody>
		</table>
		
	</div>
</template>
<script>

export default {
	data () {
		return {
			doing: false,
		}
	},
	methods: {
		onClickMeDownload (fileName) {

			if (this.doing) {
				return;
			}
			this.doing = true;

			const client = new W3CWebSocket(`ws://localhost:9000/download/${fileName}`, 'echo-protocol');

			client.onerror = function() {
				console.log('Connection Error');
			};

			client.onopen = function() {
				console.log('WebSocket Client Connected');
				client.send(fileName);
			};

			client.onclose = function() {
				console.log('echo-protocol Client Closed');
			};

			client.onmessage = function(e) {

				const data = e.data;

				const blob = new Blob([data], {type: 'Files'});
				const link = document.createElement('a');
				link.download = fileName;
				link.style.display = 'none';
				link.href = URL.createObjectURL(blob);
				document.body.appendChild(link);
				link.click();
				URL.revokeObjectURL(link.href) ; // 释放URL 对象
				document.body.removeChild(link);

				client.close();
			};
		}
	}
}
</script>